<template>
  <div class="cartBottomBar">
    <div class="check-content">
      <check-button 
      :is-checked="isSelectAll" 
      class="check-button" @click.native="checkClick"/>
      <span>全选</span>
    </div>
    <div class="price">
    合计： {{totalPrice}}
    </div>
    <div class="calculate">
    去计算： {{checkLength}}
    </div>
  </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'
import { mapGetters } from 'vuex'
  export default {
  name: "CartBottomBar",
  components: {
    CheckButton
   },
   computed: {
     ...mapGetters(['cartList']),
     totalPrice() {
       return '¥' + this.$store.state.cartList.filter(item => {
         return item.checked
       }).reduce((preValue, item) => {
         return preValue + item.price * item.count
       }, 0)
     },
     checkLength() {
       return this.$store.state.cartList.filter(item => item.checked).length
     },
     isSelectAll() {
       if (this.cartList.length ===0) return false
      return !this.cartList.find(item => !item.checked)
     }
   },
   methods: {
     checkClick() {
       if (this.isSelectAll) {
         this.cartList.forEach(item => item.checked = false)
       } else {
         this.cartList.forEach(item => item.checked = true)
       }
     }
   }
}
</script>
 
<style scoped>
 .cartBottomBar {
   height: 40px;
   position: relative;
   bottom: 133px;
   background-color: #eee;
   line-height: 40px;
   display: flex;
 }
 .check-content {
   display: flex;
   align-items: center; 
 }
 .check-button {
   width: 20px;
   height: 20px;
   line-height: 20px;
   margin-left: 5px;
   margin-right: 5px;
 }
 .price {
   margin-left: 20px;
   flex: 1;
 }
 .calculate {
   width: 90px;
   background: pink;
   text-align: center;
 }
</style>